<template>
	<el-page-header @back="goBack">
		<template v-slot:content>
			<span>{{modMatch.name}}</span>
		</template>
	</el-page-header>
	
	<div class="main">
		<Suspense>
			<component :is="modAsync"></component>
			<template v-slot:fallback>
				loading...
			</template>
		</Suspense>
	</div>
</template>

<script>
	
	import { defineComponent } from "vue";
	
	export default defineComponent({
		name: 'GalleryMod'
	})
	
</script>

<script setup>
	
	import { defineAsyncComponent, computed } from 'vue';
	import { useRoute, useRouter } from 'vue-router';
	import cardsList from './modList';
	
	const route = useRoute();
	const router = useRouter();
	
	const modMatch = computed(() => {
		return cardsList.find(item => item.name === route.query.name);
	})
	
	const modAsync = computed(() => {
		return defineAsyncComponent(() => import(`./modules${modMatch.value.path}`));
	})
	
	function goBack() {
		router.go(-1);
	}
	
</script>

<style lang="scss" scoped>
	
	.main {
		margin: 10px 0;
	}
	
</style>